<script setup>

    import { getManagerVipList, edit, del, add } from "@/api/managervip"
    import { Search,MoreFilled, Delete} from "@element-plus/icons-vue"
    import { ref, reactive, computed } from "vue"
    // import { isDark } from '~/composables/dark'
  
    const currentDate = new Date().toDateString()
    const dataList = ref([])
    const region = ref('')
    const regions = ref([])

    const star = ref('')
    const stars = ref(['一星级', '二星级','三星级','四星级','五星级'])

    const visible = ref(false)

    const dataObj = reactive({
        comment:'',      // 评论
        stars: "",  // 评论星级
        nickname: '', // 评论昵称
        pic:"",
        commentTime:'',
        points:0,
        replyText:[],
    })

    getManagerVipList().then(res=>{
        dataList.value = res
        for(let val of res){
            val.visible = false
            if(regions.value.indexOf(val.region)==-1){
                regions.value.push(val.region)
            }
            // if(stars.value.indexOf(val.star)==-1){
            //     stars.value.push(val.star)
            // }
        }
        // console.log(dataList.value);
    })
    

    function multiFilter(array, filters) {
        const filterKeys = Object.keys(filters)
        return array.filter((item) => {
            return filterKeys.every(key => {
                if(!filters[key].length) return true
                    return !!~item[key].indexOf(filters[key])
            })
            })
    }

    function filterClick(){
        let obj = {
            star: star.value ||'',
            region: region.value ||'',
        }
        console.log(obj);
        console.log(stars.value.indexOf(obj.star));

        getManagerVipList().then(res=>{
            dataList.value =  multiFilter(res, obj)
        })

    }


    function delClick(row){
        del(row).then(res=>{
            getManagerVipList().then(res=>{
            dataList.value = res})
        })
    }

    const textarea = ref('')

    function submitReply(item){
        if(textarea.value!=''){
            item.replyText.push(textarea.value)
        }
        console.log(item.replyText);
        textarea.value = ''
        item.visible = false
    }

</script>

<template>
    <div class="content">
        <span>片区名称</span>
        <el-select v-model="region" clearable placeholder="选择片区">
            <el-option v-for="item in regions" :key="item" :label="item" :value="item" />
        </el-select>

        <span>评论星级</span>
        <el-select v-model="star" clearable placeholder="星级">
            <el-option v-for="item in stars" :key="item" :label="item" :value="item" />
        </el-select>

        <el-button type="primary" round @click="filterClick">筛选</el-button>

        <ul>
            <li v-for="item in dataList" :key="item.id">
                <div class="con-top">
                    <img :src="item.pic" alt="">
                    <el-rate :model-value="stars.indexOf(item.star)+1" disabled text-color="#ff9900" />
                    <span class="com-time"> {{ item.commentTime }} </span>
                </div>
                <p> {{ item.nickname }} </p>
                
                <p class="">{{ item.comment }}</p>
                
                <div class="reply">
                    <div class="reply_comment">
                        <el-popover placement="bottom" :width="200" trigger="click">
                            <el-input v-model="textarea" maxlength="30" placeholder="回复评论" type="textarea" />
                            <div style="text-align: right; margin-top:10px;" >
                                <!-- <el-button size="small" text @click="visible=false">取消</el-button> -->
                                <el-button size="small" type="primary" @click="submitReply(item)">确定</el-button>
                            </div>
                            <template #reference>
                                <el-button type="primary" circle size="small" color="#eee" :dark="true">
                                    <el-icon color="#fff" ><MoreFilled /></el-icon>
                                </el-button>
                            </template>
                        </el-popover>
                    </div>

                    <div class="delButton">
                        <el-popover placement="bottom" :width="160" trigger="click">
                            <p>确认删除此条评论吗?</p>
                            <div style="text-align: right; margin:0;" >
                                <el-button size="small" text >取消</el-button>
                                <el-button size="small" type="primary" @click="delClick(item)">确定  </el-button>
                            </div>
                            <template #reference>
                                <el-button text size="small" :dark="true">
                                    <el-icon size="large"><Delete /></el-icon>
                                </el-button>
                            </template>
                        </el-popover>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style lang="scss" scoped>
    li {
        list-style: none;
    }
    .content {
        height: 100% ;
        overflow: auto;
    }

    .content ul {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
    }
    .content ul li {
        width: 28%;
        background-color: #fff;
        margin: 0 15px 15px 0;
        padding: 20px;
        border-radius: 5px;
        position: relative;
    }

    .con-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .con-top img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .reply {
        display: flex;
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
</style>